← Back

DOCUMENT OBJECT MODEL (DOM) IN JAVASCRIPT

This note explains the DOM in simple language.

You will learn:

  1. what JavaScript can do in the browser
  2. what ECMAScript, DOM, and BOM are
  3. what the DOM tree is
  4. how the browser builds the DOM
  5. how to search for elements
  6. what DOM navigation means

1. JavaScript in the browser

When JavaScript works in the browser, it is not only the language itself. In the browser, JavaScript works together with:

ECMAScript is the standard of the JavaScript language. It defines the syntax, rules, built-in objects, and general structure of the language.

DOM is the interface for working with the HTML document. It lets JavaScript find, create, delete, and change elements on the page.

BOM is the interface for working with the browser itself. It gives access to things like the browser window, URL, history, and location.

Diagram 1. JavaScript in the browser

JavaScript in the browser
|
+-- ECMAScript
|   language syntax, rules, and built-in objects
|
+-- DOM
|   work with the HTML document
|
+-- BOM
    work with the browser window

This diagram shows the big picture first. JavaScript in the browser includes the language standard, the page interface, and the browser interface.

2. What is the DOM?

The Document Object Model is a representation of an HTML document as a tree of objects. Every part of the page becomes part of this tree:

This means JavaScript does not work directly with raw HTML text. It works with a structured tree made of nodes.

According to the DOM model:

3. HTML document as a tree

An HTML document is hierarchical.

That means one element can contain another element.

For example:

Diagram 2. DOM tree

document
`-- html
    |-- head
    |   `-- title
    `-- body
        |-- div
        |   |-- h1
        |   |-- p
        |   `-- img
        `-- script

This diagram helps show that document is the root, html is inside document, and the elements inside body become deeper tree levels.

4. How the browser builds the DOM

Before the browser can show the page, it must convert HTML into a format it understands.

For this, the browser uses a special mechanism called the HTML parser. The parser reads the HTML and gradually builds the DOM tree. As soon as the browser receives the first pieces of HTML, it can start building the DOM.

After the DOM tree is built, JavaScript can search inside it and work with the nodes. Since DOM elements are objects, they have properties and methods that JavaScript can use.

Diagram 3. How the browser builds the DOM

HTML source
    |
    v
HTML parser
    |
    v
DOM tree
    |
    v
JavaScript can search and change nodes

This diagram shows that HTML comes first, the parser reads it, and the DOM tree is created after that.

5. Searching for elements

To work with the page, JavaScript first needs to find elements in the DOM.

The modern standard is the querySelector* group of methods. These methods use CSS selectors.

querySelector()

Syntax:

element.querySelector(selector)

This method is used when you want to find only one element, usually the first matching one.

It returns:

Example

const item = document.querySelector(".list-item");

This means:

Diagram 4. querySelector()

<ul class="list">
  <li class="list-item">First</li>   <-- selected
  <li class="list-item">Second</li>
  <li class="list-item">Third</li>
</ul>

document.querySelector(".list-item")

querySelector() returns only the first matching element, even if there are many matching elements in the page.

6. Searching for many elements

querySelectorAll()

Syntax:

element.querySelectorAll(selector)

This method is used when you want to find a collection of matching elements.

It returns:

Example

const listItems = document.querySelectorAll(".list-item");

This means:

Diagram 5. querySelectorAll()

<ul class="list">
  <li class="list-item">First</li>    <-- selected
  <li class="list-item">Second</li>   <-- selected
  <li class="list-item">Third</li>    <-- selected
</ul>

document.querySelectorAll(".list-item")

This diagram should come immediately after querySelector() because the two methods are easier to understand when they are compared together.

querySelector()    = first match only
querySelectorAll() = all matches

7. Access to the DOM starts with document

The main starting point for DOM work is usually the document object.

From document, JavaScript can reach the elements on the page. The document object is part of the global window object in browser scripts.

That is why many DOM searches look like this:

document.querySelector("h1");
document.querySelectorAll(".item");

8. DOM navigation

DOM elements are connected to one another in a hierarchy.

To describe these relationships, we use these words:

Main ideas:

Diagram 6. DOM navigation

ul
|-- li
|   `-- span
|-- li
|   `-- a
`-- li
    `-- p

ul.childNodes[0]  -> first li
ul.childNodes[1]  -> second li
ul.childNodes[2]  -> third li
ul.firstChild     -> first li
ul.lastChild      -> third li

li.parentNode        -> ul
li.previousSibling   -> previous li
li.nextSibling       -> next li

This diagram helps explain that ul is the parent, the li elements are children of ul, and the li elements are siblings of each other. The nested span, a, and p elements are descendants of ul.

9. Easy memory rules

ECMAScript = JavaScript language standard
DOM = work with the page
BOM = work with the browser

querySelector() = first match
querySelectorAll() = all matches

parent = direct container
child = direct nested element
sibling = same parent
descendant = any nested element inside

10. Quick summary

11. Final conclusion

This is the best diagram order for this DOM note:

  1. JavaScript / ECMAScript / DOM / BOM
  2. DOM tree
  3. HTML -> parser -> DOM
  4. querySelector()
  5. querySelectorAll()
  6. DOM navigation

The small parser-only diagram is not included because the larger parser diagram explains the full process more clearly.

← Back